<template>
  <div id="order-item" ref="order">
    <table>
      <tr>
        <th style="width:100%;" colspan="6">
          <div class="c-h-l">
            <span>订单编号：{{orderAll.orderId}}</span>
            <span>{{orderAll.addtime}}</span>
          </div>
          <div class="c-h-r">
            <span class="store-name">{{orderAll.storeName}}</span>
            <span class="call-store contant-store" @click="onContactShop(orderAll.storeId, orderAll.id, orderAll.goodsInfoList[0].goods_id, orderAll.goodsInfoList[0].goods_mainphoto_path)">联系店家</span>
          </div>
        </th>
        <div class="delBtn" v-if="orderAll.orderStatus == '25'" @click="deleteOrder(orderAll.id)"></div>
      </tr>
      <!--订单商品信息  -->
      <tr class="order-list" v-if="orderAll.goodsInfoList[0]" v-for="(goodsGsp, index) in orderAll.goodsInfoList[0].goodsGsp" :key="index">
        <!--一个订单中同种商品不同规格  -->
        <!-- 货品 -->
        <td>
          <div class="cols1">
              <div class="clearfix">
                <div class="shopImg" @click="goGoodsDetail(orderAll.goodsInfoList[0].goods_id)">
                  <img class="minimg" v-lazy="orderAll.goodsInfoList[0].goods_mainphoto_path" /> 
                </div>
                <div class="shop-r">
                  <div class="shop-r-t" @click="goGoodsDetail(orderAll.goodsInfoList[0].goods_id)">
                    <span>{{orderAll.goodsInfoList[0].goods_name}}</span>
                  </div>
                  <div class="shop-r-b">
                    <span class="shop-r-b-l">颜色：{{goodsGsp.goodsSpecContent[0]}}</span>
                    <span class="shop-r-b-r">尺码：{{goodsGsp.goodsSpecContent[1]}}</span>      
                  </div>
                </div>
              </div>
            </div>
        </td>
        <td class="text-c">￥{{goodsGsp.goodsSinglePrice | currency}}</td>
        <td class="text-c2">{{goodsGsp.count}}</td>
        <td style="width:19.5%" class="t-c text-c" :rowspan="orderAll.goodsInfoList[0].goodsGsp.length" v-if="index==0">
          <span>￥{{orderAll.totalPrice | currency}}</span>
        </td>
        <!--根据订单状态，判断买家提示  -->
        <td style="width:17.5%" class="t-c" :rowspan="orderAll.goodsInfoList[0].goodsGsp.length" v-if="index==0">
          <div>
            <!--退款审核中  -->
            <div class="text-c" v-if="orderAll.orderStatus == 21">买家已付款</div>
            <!--已退款  -->
            <div class="text-c" v-if="orderAll.orderStatus == 22 || orderAll.orderStatus == 25">关闭交易</div>
            <div class="text-c2 f-s goDetail" style="margin-top:10px;" @click="goOrderDetail(orderAll.id)">订单详情</div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
  import { apiEditOrderStatus, apiDeleteOrder, apiGoodsDetail } from 'js/api'

  export default {
    props: {
      // 全部订单信息
      orderAll: {
        type: Object,
        default: () => { return {} }
      }
    },
    data() {
      return {
        // 修改订单状态标识
        // pointsStatus: ''
      }
    },
    methods: {
      // 跳转商品详情
      goGoodsDetail(goodsId) {
        apiGoodsDetail(goodsId, this.token).then(data => {
          this.$router.push('../../goods/detail/' + goodsId)
        })
      },
      // 跳转订单详情
      goOrderDetail(id) {
        this.$router.push(`/orderDetail?id=${id}`)
      },
      // 修改订单状态
      onUpdateStatus(id, orderStatus) {
        apiEditOrderStatus(this.$store.getters.token, id + '', orderStatus + '').then((data) => {
          // 让上级组件刷新列表
          this.$emit('on-refresh')
        })
      },
      // 联系店家
      onContactShop(storeId, goodsId, goodImg, goodName) {
        const _this = this
        this.$store.dispatch('fetchUserRole', {
          token: this.$store.getters.token,
          callback(role) {
            _this.$store.dispatch('fetchCustomerByStoreId', {
              mobile: _this.$store.getters.mobile,
              storeId: storeId,
              goodsId: goodsId,
              firstMsg: JSON.stringify({
                'id': goodsId,
                'goods_main_photo': goodImg,
                'goodsName': goodName
              })
            })
            // if (role != 2) {
            //   _this.$toast('您不是采购商，只有采购商才可以使用聊天功能')
            // } else {
            //   _this.$store.dispatch('fetchCustomerByStoreId', {
            //     mobile: _this.$store.getters.mobile,
            //     storeId: storeId,
            //     goodsId: goodsId,
            //     firstMsg: JSON.stringify({
            //       'id': goodsId,
            //       'goods_main_photo': goodImg,
            //       'goodsName': goodName
            //     })
            //   })
            // }
          }
        })
      },
      // 银行退款完成时可删除改订单
      deleteOrder(orderId) {
        let $this = this
        this.$modal({
          content: '您确认删除订单吗？',
          onConfirm() {
            apiDeleteOrder([orderId]).then(data => {
              $this.$toast('订单删除成功', () => {
                $this.$emit('on-refresh') // 订单删除后，刷新myOrder页面
              })
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../../scss/_var.scss';
  tr.order-list {
    td {
      width: 12.5%;

      &:nth-child(1) {
        width: 37.5%;
      }
      &:nth-child(2), &:nth-child(3) {
        text-align: center;
      }
    }
  }
  table{
    margin-top: 10px;
    margin-bottom: 7px;
    background-color: $color-white;
    width: 100%;
    border: 1px solid #ddd;
    color: #3c3c3c;
    // 删除订单按钮
    .delBtn {
      width: 22px;
      height: 25px;
      display: inline-block;
      vertical-align: middle;
      background-image: url('../../../assets/btn_delete.png');
      background-repeat: no-repeat;
      background-size: cover;
      position: absolute;
      right: 20px;
      margin-top: 10px;
      &:hover {
        cursor: pointer;
      }
    }
    tr{
      width: 100%;
      font-size: 0;
    }
    th{
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      border-bottom: 1px solid #ddd;
      padding-left: 20px;
      padding-right: 10px;
      color: #3c3c3c;
        .c-h-l {
          display: inline-block;
          float: left;
          font-size: 12px;
          span {
            margin-right: 17px;
          }
        }
        .c-h-r {
          display: inline-block;
          float: right;
          margin-right: 274px;
          .store-name {
            max-width: 300px;
            margin-right: 17px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            float: left;
            color: $color-dark;
          }
          .call-store {
            width: 110px;
            height: 29px;
            line-height: 27px;
            border: 1px solid;
            border-radius: 3px;
            color: $color-main;
            display: inline-block;
            cursor: pointer;
          }
        }
    }
    td{
      font-size: 14px;
      vertical-align: middle;
    }
    .cols1{
      padding: 15px 0 15px 20px;
      font-size: 12px;
        .shopImg {
          width: 80px;
          height: 80px;
          margin-right: 9px;
          float: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-position: center center;
          cursor: pointer;
        }
        .shop-r {
          // float: left;
          height: 80px;
          width: 180px;
          margin-left: 85px;
          padding: 0;
          &-t {
            height: 40px;
            margin-bottom: 26px;
            color: #444;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            cursor: pointer;
            &:hover {
              color: $color-main;
            }
          }
          &-b {
            color: $color-dark;
            &-l {
              float: left;
            }
            &-r {
              float: right;
            }
          }
        }
    }
    .t-c{
      text-align: center;
    }
    .td-width {
      width: 134px; 
      display: inline-block
    }
  }
  .goDetail:hover{
    color: #F00384;
    cursor: pointer;
  }
  .button{
    background-color: #F00384;
    width: 80px;
    height: 30px;
    font-size: 16px;
    color: #fff;
  }
  .text-c {
    color: #F00384;
  }

  .text-c1 {
    color: #4AC375;
  }
  .text-c2 {
    color: #666;
  }
  // 取消订单
  .del-order {
    cursor: pointer;
    margin-top:19px;
  }
</style> 